<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>The CheckBox Tree with an Evented Store and custom data handler.</title>
    <style type="text/css">
      @import "../../../dijit/themes/claro/claro.css";
      @import "../../../dijit/themes/claro/document.css";
      @import "../../../dijit/tests/css/dijitTests.css";
      @import "../../themes/claro/claro.css";
    </style>

    <script type="text/javascript">
      var dojoConfig = {
            async: true,
            parseOnLoad: true,
            isDebug: false,
            baseUrl: "../../../",
            packages: [
              { name: "dojo",  location: "dojo" },
              { name: "dijit", location: "dijit" },
              { name: "cbtree",location: "cbtree" }
            ]
      };
    </script>

    <script type="text/javascript" src="../../../dojo/dojo.js"></script>
    <script type="text/javascript">
      require([
        "dojo/ready",
				"dojo/request/handlers",
        "cbtree/Tree",                        // Checkbox tree
        "cbtree/model/TreeStoreModel",        // Object Store Tree Model
        "cbtree/store/ObjectStore",           // Evented Object Store with Hierarchy
        "cbtree/store/handlers/csvHandler"   // CSV Data Handler.
        ], function (ready, handlers, Tree, ObjectStoreModel, ObjectStore, csvHandler) {

					// Manually instantiate the custom data handler and register it with dojo/request
					// (see tree10.html for an automatic approach).

					var myHandler = new csvHandler({fieldNames:["name", "parent", "hair", "checked"]});
					handlers.register("csv", myHandler.handler );

          var store = new ObjectStore( { url:"../../store/csv/Simpsons.csv",
                                          idProperty:"name",
                                          handleAs: "csv"
                                         });

          var model = new ObjectStoreModel( { store: store,
                                               query: {name: "Root"},
                                               rootLabel: "The Simpsons",
                                               checkedRoot: true
                                             });

          function checkBoxClicked( item, nodeWidget, event ) {
            // Do something when a checkbox is clicked...
          }

          ready(function(){
            var tree = new Tree( { model: model, id: "tree11" }, "CheckboxTree" );
            tree.on("checkBoxClick", checkBoxClicked);
            tree.startup();
          });
        });
      </script>

  </head>

  <body class="claro">
    <h1 class="DemoTitle">The CheckBox Tree with Multi State CheckBoxes</h1>
    <p>
			A CheckBox Tree using a cbtree/store ObjectStore with a custom CSV data handler.<br/>
			The store loads an rfc4180 compliant CSV file using a URL.
    </p>
    <div id="CheckboxTree">
    </div>
		<p>
			This example is the same as demo tree10 with the exception that this example registers<br/>
			the data handler directly with dojo/request/handlers
    </p>
  </body>
</html>